<template>
	<el-popover
		v-model="showPopover"
		@hide="$emit('hide')"
		placement="bottom"
		:width="330"
		:disabled="disabled"
		visible-arrow="left"
		popper-class="no-padding-popover"
		trigger="click"
	>
		<el-input
			placeholder="搜索"
			size="mini"
			class="filter-input"
			v-model="filterText"
		>
			<i class="search-icon el-icon-search" slot="prefix"></i>
		</el-input>
		<div class="tree-box">
			<el-tree
				highlight-current
				show-checkbox
				default-expand-all
				ref="tree"
				node-key="id"
				:data="item.tree"
				:props="defaultProps"
				:filter-node-method="filterNode"
				@check-change="handleChange"
			>
			</el-tree>
		</div>
		<slot name="reference" slot="reference">
			<flexbox
				wrap="wrap"
				:class="[disabled ? 'is_disabled' : 'is_valid']"
				class="xh-tree-cont"
			>
				<div class="data-item" v-for="(nodes, index) in dataValue" :key="index">
					{{ nodes.map((n) => n.label).join('-') }}
					<i
						@click.stop="handleDelete(nodes)"
						class="delete-icon el-icon-close"
					></i>
				</div>
				<div class="add-item" v-if="value.length == 0">
					+{{ item.placeholder || '添加' }}
				</div>
			</flexbox>
		</slot>
	</el-popover>
</template>

<script>
import arrayMixin from './arrayMixin'
let incId = 1
// tree转为一维数组
function getAllNodes(nodes, allNodes) {
	allNodes = allNodes || []
	nodes.forEach((node) => {
		const hits = allNodes.find((_node) => _node === node)
		if (!hits) {
			allNodes.push(node)
			if (node.children) {
				getAllNodes(node.children, allNodes)
			}
		}
	})
	return allNodes
}
export default {
	mixins: [arrayMixin],
	data() {
		return {
			// 选中项(由父节点到叶子节点组成的集合的集合)
			dataValue: [],
			showPopover: false,
			defaultProps: {
				children: 'children',
				label: 'label'
			},
			filterText: ''
		}
	},
	watch: {
		value(val) {
			this.setFromValue()
			this.setCheckedKeys()
		},
		filterText(val) {
			this.$refs.tree.filter(val)
		},
		showPopover(val) {
			console.log(val)
		}
	},
	computed: {
		// 所有节点
		allNodes() {
			return getAllNodes(this.item.tree)
		},
		// 所有叶子节点
		allLeafs() {
			return this.allNodes.filter((n) => !n.children || !n.children.length)
		}
	},
	mounted() {
		this.setFromValue()
		this.setCheckedKeys()
	},
	methods: {
		setFromValue() {
			let toLeafs = this.allLeafs.filter((leaf) =>
				this.value.find((id) => id === leaf.id)
			)
			this.dataValue = toLeafs.map((leaf) => {
				let parents = [] // 由父节点到叶子节点组成的集合
				let parent = leaf
				do {
					parents.unshift(parent)
					parent = this.allNodes.find((node) => node.id === parent.pid)
				} while (parent)
				return parents
			})
		},
		setCheckedKeys() {
			this.$refs.tree.setCheckedKeys(this.value)
		},
		contentClick() {
			// this.showPopover = true
		},
		handleChange() {
			const value = this.$refs.tree.getCheckedKeys()
			this.valueChange(value)
		},
		handleDelete(nodes) {
			const value = this.value.filter((id) =>
				nodes.every((node) => node.id !== id)
			)
			this.valueChange(value)
		},
		// 节点搜索过滤
		filterNode(value, data) {
			if (!value) return true
			return data.label.indexOf(value) !== -1
		}
	}
}
</script>

<style lang="scss" scoped="scoped">
.xh-tree-cont {
	min-height: 34px;
	position: relative;
	border-radius: 3px;
	font-size: 12px;
	border: 1px solid #ddd;
	color: #333333;
	padding: 2px;
	line-height: 14px;
	transition: border-color 0.1s linear;
	&.is_disabled {
		background-color: #f5f7fa;
		border-color: #e4e7ed;
		cursor: not-allowed;
	}
	&.is_valid:hover {
		border-color: #c0c4cc;
	}
}
.filter-input {
	margin: 8px;
	width: calc(100% - 16px);
	.search-icon {
		margin: 9px 6px;
	}
	::v-deep input {
		border-radius: 99px;
	}
}
.tree-box {
	width: 100%;
	height: 450px;
	overflow: auto;
}
.data-item {
	padding: 5px;
	background-color: #e2ebf9;
	border-radius: 3px;
	margin: 2px;
	cursor: pointer;
}
.add-item {
	color: #3e84e9;
	padding: 0 5px;
	cursor: pointer;
}
</style>
